const LxSidebar = {
    render(h) {
        return h(
            'el-aside',
            {
                class: ['h-full', 'border-r', { isCollapse: this.isCollapse }]
            },
            [
                h(
                    'el-menu',
                    {
                        props: {
                            'default-active': this.activeMenu,
                            collapse: this.isCollapse,
                            'unique-opened': true
                        },
                        class: 'border-none',
                        on: {
                            open: this.handleMenuOpen,
                            close: this.handleMenuClose
                        }
                    },
                    [
                        // 总览菜单项
                        h(
                            'el-menu-item',
                            {
                                props: { index: 'dashboard' },
                                class: 'menu-item',
                                key: 'dashboard', // 确保 key 唯一
                                on: {
                                    click: () => this.handleMenuItemClick('dashboard')
                                }
                            },
                            [h('i', { class: 'fas fa-tachometer-alt mr-2' }), h('span', { slot: 'title' }, '总览')]
                        ),

                        // 循环生成子菜单
                        this.localMenus.map((menu) =>
                            h(
                                'el-submenu',
                                {
                                    key: menu.index, // 确保 key 唯一
                                    props: { index: menu.index }
                                },
                                [
                                    // 标题模板
                                    h('template', { slot: 'title' }, [h('i', { class: `${menu.icon} mr-2` }), h('span', menu.title)]),

                                    // 子菜单项
                                    ...menu.subs.map((sub) =>
                                        h(
                                            'el-menu-item',
                                            {
                                                key: sub.index, // 确保 key 唯一
                                                props: { index: sub.index },
                                                on: {
                                                    click: () => this.handleMenuItemClick(sub.index)
                                                }
                                            },
                                            [h('i', { class: `${sub.icon} mr-2` }), h('span', { slot: 'title' }, sub.title)]
                                        )
                                    )
                                ]
                            )
                        )
                    ]
                )
            ]
        );
    },
    name: 'LxSidebar',
    props: {
        activeMenu: {
            type: String,
            default: 'dashboard'
        },
        isCollapse: {
            type: Boolean,
            default: false
        },
        menus: []
    },
    data() {
        return {
            localMenus: this.menus.slice()
        };
    },
    methods: {
        handleMenuOpen(key) {
            this.$emit('menu-open', key);
        },
        handleMenuClose(key) {
            this.$emit('menu-close', key);
        },
        handleMenuItemClick(index) {
            window.open(index, '_blank');
        }
    },
    created() {
        let menuList = JSON.parse(localStorage.getItem('userMenuList')) || [];
        let arr = menuList.map((item) => ({
            index: item.menuCode,
            title: item.menuName,
            icon: 'fas fa-comments',
            subs: item.children.map((sub) => ({
                index: sub.path,
                title: sub.menuName,
                icon: 'fas fa-comments'
            }))
        }));
        console.log(arr);
        this.localMenus = arr;
        console.log(this.localMenus);
    }
};
export default LxSidebar;
